<template>
	<div class="design-datagrid-column-component" @click.stop="onClickHandler" :class="[selected ?'design-datagrid-column-component-selected' : 'design-datagrid-column-component']">
		<div class="design-datagrid-column-component-title">{{componentModel.title}}</div>
		<slot></slot>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	import formDesignerUtil from '@/utils/formDesignerUtil.js';
	export default {
		name: "DesignDataGridColumnComponent",
		props: [
			"componentModel"
		],beforeMount() {
			if(this.componentModel.title==undefined){
				formDesignerUtil.setComponentModelPropValue(this.componentModel,"title","列标题");
			}
		},
		data() {
			return {
				value: "",
				selected:false,
				"propertySet": [
					{
						"key": "ID","label":"ID","editor":"label"
					},
					{
						"key": "title","label":"标题","editor":"text"
					},
					{
						"key": "fixed","label":"固定列","editor":"checkbox"
					}
				]
			}
		},inject:['children'],
		mounted() {
			this.children.push(this);
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			onClickHandler(){
				formDesignerUtil.mobileComponentClickHandler(this);
			},setSelected(selected){
				this.selected=selected;	
			},getPropertyValue(propertyKey){
				if (propertyKey == "ID") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"id");
				} else if (propertyKey == "title") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"title");
				}
				return formDesignerUtil.getComponentModelCommonValue(this.componentModel,propertyKey);
			},setPropertyValue(propertyKey,propertyValue){
				formDesignerUtil.setComponentModelCommonValue(this.componentModel,propertyKey, propertyValue);
				if(propertyKey=="title"){
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"title",propertyValue);
				}
			}
		}
	}
</script>

<style>

</style>
